<template>
  <div class="demo mg-f20">
    <div>
      <button class="mg-r20" @click="clickHi()">hi {{Hi}}</button>
      <button class="mg-r20" @click="http()">post请求</button>
      <button class="mg-r20" @click="http('g')">get请求</button>
      <button @click="init">init</button>
    </div>
    <h1 class="fs-40">This is an about demo page-{{Demo}}-{{demo}}</h1>
  </div>
</template>
<script>
import _ from 'lodash'
import { formatTime } from '@/utils/lj.js'
import { mapState, mapMutations, mapActions } from 'vuex'
import dayjs from 'dayjs'
export default {
  name: 'about',
  props: {
    msg: String
  },
  data() {
    return {
      a: 'test'
    }
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapState(['Hi']),
    ...mapState('demo', [
      'Demo',
    ]),
    ...mapState({
      demo: state => state.demo.Demo
    })
  },
  methods: {
    ...mapMutations('demo', ['setDemo']),
    ...mapActions('demo', ['setDemoA', 'TestGet', 'TestPost']),
    http(argType) {
      if (argType === 'g') {
        this.testGet()
      } else {
        this.testPost()
      }
    },
    testGet() {
      this.TestGet({ page: 1 }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    testPost() {
      this.TestPost({ page: 1 }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    clickHi() {
      console.log(this)
      console.log(this.Hi, formatTime(0), this)
      console.log(_.last([1, 2, 3]))
      console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'))
      let time = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.setDemo('time:' + time)
      this.$store.commit('demo/setDemo', 'changeDemo')
      this.setDemoA()
    },
    init() {
      this.testGet()
      this.testPost()
    }
  },
  mounted() {
    console.log('init')
    this.init()
  },
  beforeDestroy() { },
  destroyed() { }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.demo {
  button {
    height: 50px;
    top: 50%;
    left: 50%;
  }
}
</style>